<template xmlns:v-on="http://www.w3.org/1999/xhtml">
<div class="rich-area fluid field inline" :class="{disabled: data.readonly}">
  <label :class="{must: data.is_must}">{{data.label}}</label>
  <ueditor :value="value" :config="config" @onchange="onchange" @ready="ready"></ueditor>
</div>
</template>

<script>
import ueditor from 'components/tunit/fields/ueditor2';

export default {
  data() {
    return {
      value: '',
      config: {
        initialFrameWidth: null,
        initialFrameHeight: 320,
      },
    };
  },
  components: {
    ueditor,
  },
  watch: {
    value: function(val, old) {
      if (val != old) {
        this.$emit('onchange', {name:this.data.name, value:val, param: this.data, raw: this.data})
      }
    }
  },
  methods: {
    onchange(obj) {
      this.value = obj.content
    },
    ready() {
    },
  },
  props: ['data'],
  created() {
    this.value = this.data.value || '';
  },
};
</script>
<style rel="stylesheet/less" lang="less" scoped>
  .rich-area{
    overflow: hidden;
    position: relative;
    z-index: 0;
  }
  .edui-default{
    color: #000;
  }
</style>
